<template>
  <div class="tree-container">
    <div class="toolbar">
      <a-input-search
        v-model:value="searchValue"
        placeholder="搜索节点"
        style="width: 200px; margin-right: 12px"
        allow-clear
        :loading="searchLoading"
        @search="onSearch"
      />
      <a-button danger @click="handleDelete" :disabled="!selectedNode">
        <template #icon><DeleteOutlined /></template>
        删除节点
      </a-button>
      <span v-if="selectedNode" class="selected-info"> 已选择: {{ selectedNode.title }} </span>
    </div>

    <div v-if="loading" class="loading-indicator">
      <a-spin size="small" />
      <span style="margin-left: 8px">加载中...</span>
    </div>

    <a-tree
      v-if="!loading"
      :tree-data="treeData"
      :show-line="true"
      :show-icon="true"
      :selected-keys="selectedNode ? [selectedNode.key] : []"
      :expanded-keys="expandedKeys"
      :load-data="onLoadData"
      :loaded-keys="loadedKeys"
      @select="onSelect"
      @expand="onExpand"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  Tree as ATree,
  Spin as ASpin,
  Button as AButton,
  InputSearch as AInputSearch,
  message,
} from 'ant-design-vue'
import { DeleteOutlined } from '@ant-design/icons-vue'
import { type TreeNode } from '../mock-network'
import { TreeModel } from './tree-model'

// 状态管理
const loading = ref(false)
const treeModel = new TreeModel()
const treeData = ref<TreeNode[]>(treeModel.data)
const selectedNode = ref<TreeNode | null>(treeModel.selectedNode)
const expandedKeys = ref<string[]>(treeModel.expandedKeys)
const loadedKeys = ref<string[]>(treeModel.loadedKeys)

const searchValue = ref('')
const searchLoading = ref<boolean>(false)

// 初始化加载根节点
const initTree = async () => {
  loading.value = true
  await treeModel.init()
  treeData.value = treeModel.data
  loading.value = false
}

// 选择节点事件处理
const onSelect = (
  selectedKeys: string[],
  info: { node: TreeNode; selected: boolean; selectedNodes: TreeNode[] },
) => {
  treeModel.updateSelectNode(info.node)
  selectedNode.value = info.node
}

// 点击展开，加载子节点数据
const onLoadData = async (node: TreeNode) => {
  await treeModel.expand(node)
  updateStatus()
}

// 处理折叠事件
const onExpand = (_, info: { node: TreeNode; expanded: boolean }) => {
  if (info.expanded === false) {
    treeModel.collapsed(info.node)
    updateStatus()
  }
}

// 更新数据状态
const updateStatus = () => {
  treeData.value = treeModel.data
  selectedNode.value = treeModel.selectedNode
  expandedKeys.value = treeModel.expandedKeys
  loadedKeys.value = treeModel.loadedKeys
}

// 删除节点
const handleDelete = async () => {
  await treeModel.delete()
  updateStatus()
  message.success('删除成功')
}

// 搜索
const onSearch = async (searchValue: string) => {
  if (searchValue === '') {
    return
  }

  searchLoading.value = true
  const result = await treeModel.search(searchValue)
  if (result) {
    updateStatus()
  }
  searchLoading.value = false
}

// 组件挂载时初始化
initTree()
</script>

<style scoped>
.tree-container {
  padding: 20px;
  max-width: 600px;
}

.toolbar {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.selected-info {
  color: #666;
  font-size: 14px;
}

.loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: #666;
}
</style>
